<template>
  <div class="VideoWarning">
    <TitleColumn name="短信预报" />
    <div class="content">
      <ul class="header">
        <li>
          红色预警
          <span>
            <CountTo :startVal="1" :endVal="24" :decimals="0" :duration="1000" /></span
          >个
        </li>
        <li>
          橙色预警
          <span
            ><CountTo :startVal="1" :endVal="24" :decimals="0" :duration="1000" /></span
          >个
        </li>
        <li>
          黄色预警
          <span
            ><CountTo :startVal="1" :endVal="24" :decimals="0" :duration="1000" /></span
          >个
        </li>
        <li>
          蓝色预警
          <span
            ><CountTo :startVal="1" :endVal="24" :decimals="0" :duration="1000" /></span
          >个
        </li>
      </ul>
      <ul class="tableColumns">
        <li
          class="listItem"
          v-for="(item, i) of state.columns"
          :key="i"
          :style="getColumnStyle(item)"
        >
          {{ item.title }}
        </li>
      </ul>
      <vue3ScrollSeamless
        class="tableScrollWrap"
        :classOptions="{ step: 0.3 }"
        :dataList="state.dataSource"
      >
        <ul class="listWrap" v-if="state.dataSource && state.dataSource.length > 0">
          <li class="listItem" v-for="(item, i) of state.dataSource" :key="i">
            <p
              v-for="(child, index) in state.columns"
              :key="index"
              :style="getColumnStyle(child)"
              :data-source="JSON.stringify(item)"
            >
              <template v-if="child.dataIndex === 'index'">
                {{ i + 1 < 10 ? "0" + (i + 1) : i + 1 }}.
              </template>
              <template v-if="child.dataIndex === 'tm'">
                {{
                  item[child.dataIndex]
                    ? dayjs(item[child.dataIndex]).format("YYYY-MM-DD HH:mm:ss")
                    : "--"
                }}
              </template>
              <template v-else-if="child.dataIndex === 'leavl'">
                <span
                  class="leavl"
                  :class="[leavlList[item[child.dataIndex] - 1].class]"
                  >{{ leavlList[item[child.dataIndex] - 1].name }}</span
                >
              </template>
              <template v-else>{{ item[child.dataIndex] }}</template>
            </p>
          </li>
        </ul>
        <div class="emptyText" v-else>
          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无预警" />
        </div>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import TitleColumn from "@/components/TitleColumn";
import { CountTo } from "@gui-pkg/components";
import { Empty } from "ant-design-vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import { leavlList } from "./log.data";
// import { getWaterWarningData } from '@/api/oneMap/baseData';
import dayjs from "dayjs";

const state = reactive({
  loading: false,
  columns: [
    { title: "序号", dataIndex: "index", key: "index", width: "60px", align: "center" },
    { title: "操作时间", dataIndex: "tm", key: "tm", width: "180px", align: "center" },
    {
      title: "自然村",
      dataIndex: "local",
      key: "local",
      width: "200px",
      align: "center",
    },
    {
      title: "预警等级",
      dataIndex: "leavl",
      key: "leavl",
      width: "240px",
      align: "center",
    },
  ],
  dataSource: [],
});
// 计算属性来动态计算样式
const getColumnStyle = (column) => {
  return {
    width: column.width || `${100 / state.columns.length}%`,
  };
};

const getTableDataSource = async () => {
  state.loading = true;
  state.dataSource = [
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 2 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 3 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 4 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 2 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 2 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
    { tm: "2024-05-04 15:00", local: "7.28mm", leavl: 1 },
  ];
  state.loading = false;
};

onMounted(async () => {
  getTableDataSource();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.VideoWarning {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    background: #02123433;
    backdrop-filter: blur(10px);
    .header {
      display: flex;
      justify-content: space-between;
      padding: 16px 10px;
      li {
        width: 23%;
        height: 32px;
        font-family: Source Han Sans CN;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-family: DIN Alternate;
          font-size: 18px;
          font-weight: 700;
          margin: 0 4px;
        }

        &:nth-of-type(1) {
          background: url(./images/red.png) no-repeat;
          background-size: 100% 100%;
        }
        &:nth-of-type(2) {
          background: url(./images/orange.png) no-repeat;
          background-size: 100% 100%;
        }
        &:nth-of-type(3) {
          background: url(./images/yellow.png) no-repeat;
          background-size: 100% 100%;
        }
        &:nth-of-type(4) {
          background: url(./images/blue.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .tableColumns {
      width: 100%;
      height: 26px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(220, 237, 255, 0.2);
      background: #026ec261;
      position: relative;
      margin-bottom: 6px;
      &::before {
        content: "";
        width: 2px;
        height: 10px;
        background: #d7eeff;
        position: absolute;
        left: 0px;
        opacity: 0.8;
      }
      &::after {
        content: "";
        width: 2px;
        height: 10px;
        background: #d7eeff;
        position: absolute;
        right: 0px;
        opacity: 0.8;
      }
      li {
        width: 100%;
        padding: 8px 8px;
        text-align: center;
        color: #d7eeff;
        position: relative;
        &::after {
          content: "";
          width: 0;
          height: 0;
          display: inline-block;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid #06b7fd;
          position: absolute;
          bottom: 4px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    .tableScrollWrap {
      width: 100%;
      height: calc(100% - 82px);
      min-height: 150px !important;
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      ul.listWrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      li.listItem {
        width: 100%;
        min-height: 26px;
        margin-bottom: 8px;
        justify-content: center;
        /* border: 1px solid #DCEDFF4D;
        background: #026EC21F; */
        background: url(./images/row_bg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        color: #fff;
        padding: 0 10px;
        p {
          width: 100%;
          color: #fff;
          text-align: center;
          font-size: 12px;
          .leavl {
            display: inline-block;
            width: 85px;
            height: 18px;
            color: #fff;
            &.red {
              background: linear-gradient(
                90deg,
                rgba(255, 92, 0, 0.6) 0%,
                rgba(255, 48, 54, 0.6) 97.22%
              );
              border: 0.58px solid;
              border-image-source: linear-gradient(
                90deg,
                #ff3036 0%,
                rgba(255, 255, 255, 0.72) 48.62%,
                rgba(255, 48, 54, 0.96) 100%
              );
            }
            &.orange {
              background: linear-gradient(
                90deg,
                rgba(255, 138, 0, 0.71) 0%,
                rgba(253, 216, 46, 0.4) 100%
              );
              border: 0.58px solid;

              border-image-source: linear-gradient(
                90.12deg,
                #ff8800 0.14%,
                rgba(255, 255, 255, 0.8) 45.88%,
                #ff8800 99.94%
              );
            }
            &.yellow {
              background: linear-gradient(
                90deg,
                rgba(255, 199, 0, 0.67) 0%,
                rgba(253, 216, 46, 0.47) 100%
              );
              border: 0.58px solid;

              border-image-source: linear-gradient(
                90.61deg,
                #fdd82e 0.52%,
                #ffffff 48.51%,
                #fdd82e 99.59%
              );
            }
            &.blue {
              background: linear-gradient(
                90deg,
                rgba(0, 83, 218, 0.6) 0%,
                rgba(6, 183, 253, 0.6) 100%
              );
              border: 0.58px solid;
              border-image-source: linear-gradient(
                90deg,
                #06b7fd 0%,
                rgba(255, 255, 255, 0.85) 46.88%,
                #06b7fd 100%
              );
            }
          }
        }
        &:hover {
          background: url(./images/row_hover.png) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          p {
            color: #51fbff;
          }
        }
      }
      ::v-deep(.ant-empty-description) {
        color: #fff;
      }
    }
  }
}
</style>
